<template>
  <view class="page">
    <uv-sticky bg-color="#fff">
      <uv-search
        v-model="searchText"
        show-action
        clearabled
        margin="20rpx"
        placeholder="搜索"
        action-text="取消"
        :animation="searchText ? false : true"
        @search="handleSearch"
        @clear="handleSearch"
        @custom="handleCancel"
      />
    </uv-sticky>
    <view class="device-item" v-for="(i, index) in filterDataList" :key="index">
      <text>{{ i.deviceName || "无" }}： </text>
      <text>完成 {{ i.completedCountSum || 0 }}</text>
      <text> 剩余 {{ (i.totalSum || 0) - (i.completedCountSum || 0) }}</text>
      <view
        class="progress"
        :style="{ width: (i.completedCountSum / (i.totalSum || 1)) * 100 + '%' }"
      />
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { taskIncomplete } from "@/request/task.js";

const searchText = ref(""); // 搜索框内容
const taskId = ref(""); // 任务ID
const dataList = ref([]); // 数据列表
const filterDataList = ref([]); // 过滤后的数据

onLoad((e) => {
  taskId.value = e.id;
  getList();
});

// 搜索数据
const handleSearch = (value = "") => {
  filterDataList.value = dataList.value.filter((item) => {
    return item.deviceName.includes(value);
  });
};

// 取消搜索
const handleCancel = () => {
  searchText.value = "";
  handleSearch();
};

// 获取设备列表
const getList = () => {
  taskIncomplete(taskId.value).then((res) => {
    if (res.code == 200) {
      dataList.value = res.data;
      filterDataList.value = res.data;
    }
  });
};
</script>
<style lang="scss" scoped>
@import "@/uni.scss";
.page {
  height: 100vh;
  background-color: #f9f9f9;
  box-sizing: border-box;
  padding-bottom: 20rpx;
  .device-item {
    font-size: 28rpx;
    border: 2rpx solid #dedede;
    background-color: #fff;
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 8rpx;
    overflow: hidden;
    position: relative;
    text {
      position: inherit;
      z-index: 2;
      color: #757575;
    }
    .progress {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      background-color: #9debb2;
      z-index: 1;
      transition: all 0.3s;
    }
  }
}
</style>
